<template>
	<!-- 上传图片 -->
	<view class="img_box">
		<view class="item_cont" v-for="(item, index) in imageList" :key="index">
			<view class="zanwei">
				<view class="upload_item" @click="itemClick(index)">
					<image class="no_camera" mode="aspectFill" :src="item" />
					<view class="dele_img" v-if="!disabled" @click="deletImg(index)">
						<view class="icon iconfont iconfont-e724" style="color:#f05b29;"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="item_cont" v-if="!disabled && (length && imageList.length < length)">
			<view class="zanwei">
				<view class="upload_item camera_item" @click="uploadImg">
					<view class="loading_view iconfont iconfont-e641" v-if="uploadLoading"></view>
					<view class="camera_box" v-else>
						<view class="iconfont iconfont-e727"></view>
						<view class="text">添加图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload';
	export default {
		components: {},
		data() {
			return {
				imageList: [],
				uploadLoading: false
			};
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}, // 是否禁用
			length: {
				type: Number,
				default: 9
			}, // 最多可以上传20张
			count: {
				type: Number,
				default: 9
			} // 每次允许上传多少张
		},
		watch: {
			value: {
				handler(newVal) {
					if (newVal) {
						this.imageList = newVal.split(',');
					} else {
						this.imageList = [];
					}
				},
				immediate: true
			}
		},
		mounted() {},

		methods: {
			// 上传图片
			uploadImg() {
				if (this.uploadLoading) {
					this.$toast('正在上传中...')
					return
				}
				let _this = this;
				let resideLength = this.length - this.imageList.length; // 还可以上传多少张
				let count = this.count; // 每次允许上传多少
				if (resideLength < count) {
					count = resideLength;
				}
				let params = {
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera']
				};
				this.uploadLoading = true
				uploadImage(params).then(res => {
					this.imageList = this.imageList.concat(res)
					this.$emit('input', this.imageList.join(','));
					this.uploadLoading = false
				});
			},
			// 删除图片
			deletImg(index) {
				this.imageList.splice(index, 1);
				this.$emit('input', this.imageList.join(','));
			}
		}
	};
</script>

<style scoped lang="scss">
	.img_box {
		display: flex;
		flex-wrap: wrap;
		background: #fff;

		.item_cont {
			width: 25%;
			box-sizing: border-box;
			padding-right: 20rpx;
			margin-bottom: 16rpx;

			.zanwei {
				width: 100%;
				height: 0;
				padding-bottom: 100%;
				position: relative;
			}
		}

		.upload_item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: center;

			&:nth-of-type(4n) {
				margin-right: 0;
			}

			.dele_img {
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(30%, -30%);

				.icon {
					width: 34rpx;
					height: 34rpx;
					background: #fff;
					color: #999999;
					border-radius: 50%;
					overflow: hidden;
				}
			}

			&.camera_item {
				.camera_box {
					text-align: center;

					.text {
						font-size: 24rpx;
						margin-top: 10rpx;
						color: #999;
					}

					.iconfont {
						align-items: center;
						justify-content: center;
						font-size: 40rpx;
						color: #999;
					}
				}
			}
		}

		.loading_view {
			font-size: 50rpx;
			color: #999;
			animation: turn 3s linear infinite;
		}

		@keyframes turn {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	}
</style>
